<template>
    <echart :options="option" class="echarts"></echart>
</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>

<script>
var builderJson = {
  CPU: {
    实时服务器1: 63.11,
    接口服务器1: 29.14,
    接口转发服务器2: 7.75
  },
  memory: {
    历史服务器1: 65.12,
    实时服务器1: 27.26,
    接口转发服务器1: 7.62
  },
  disk: {
    历史服务器1: 32.12,
    历史服务器2: 21.26,
    接口转发服务器1: 10.62
  },
  flux: {
    接口转发服务器1: 45.12,
    远程FEP1: 23.26,
    远程FEP2: 9.62
  }
};
export default {
  data: function() {
    return {
      option: {
        title: [
          {
          text: "分类统计                       ",
          left: "5%",
          top: "1%",
          textStyle: {
              color: "#eedfbe",
            },
          backgroundColor: "#0a3c60"
        },
          {
            text: "CPU TOP3",
            x: "25%",
            y: "7%",
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          },
          {
            text: "内存 TOP3",
            x: "75%",
            y: "7%",
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          },
          {
            text: "磁盘 TOP3",
            x: "25%",
            y: "57%",
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          },
          {
            text: "流量 TOP3",
            x: "75%",
            y: "57%",
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          }
        ],
        backgroundColor: "#0D2A42",
        ////grid开始/////
        grid: [
          {
            x: "4%",
            y: "14%",
            width: "40%",
            height: "35%",
            containLabel: true
          },
          {
            //b
            x: "54%",
            y: "14%",
            width: "40%",
            height: "35%",
            containLabel: true
          },
          {
            //c
            x: "4%%",
            y: "64%",
            width: "40%",
            height: "35%",
            containLabel: true
          },
          {
            //d
            x: "54%",
            y: "64%",
            width: "40%",
            height: "35%",
            containLabel: true
          }
        ],

        ////xAxis开始/////
        xAxis: [
          {
            name: "%",
            splitNumber: 5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            max: 100
          },
          {
            name: "%",
            gridIndex: 1,
            splitNumber: 5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            max: 100
          },
          {
            name: "%",
            gridIndex: 2,
            splitNumber: 5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            max: 100
          },
          {
            name: "%",
            gridIndex: 3,
            splitNumber: 5,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            max: 100
          }
        ],

        ////yAxis开始/////
        yAxis: [
          {
            inverse: true,
            axisLabel: {
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            data: Object.keys(builderJson.CPU)
          },
          {
            inverse: true,
            gridIndex: 1,
            axisLabel: {
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            data: Object.keys(builderJson.memory)
          },
          {
            inverse: true,
            gridIndex: 2,
            axisLabel: {
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            data: Object.keys(builderJson.disk)
          },
          {
            inverse: true,
            gridIndex: 3,
            axisLabel: {
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF"
              }
            },
            data: Object.keys(builderJson.flux)
          }
        ],

        tooltip: {
          formatter: function(parmes) {
            return parmes.name + " : " + parmes.value;
          }
        },

        series: [
          /////////bar开始/////////////
          {
            //a
            name: "CPU",
            type: "bar",
            data: Object.values(builderJson.CPU),
            label: {
              show: true,
              position: "right",
              align: "left",
              color:"#FFFFFF"
            },
            itemStyle: {
              color: "#DC143C"
            }
          },
          {
            //b
            name: "内存",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: Object.values(builderJson.memory),
            label: {
              show: true,
              position: "right",
              align: "left",
              color:"#FFFFFF"
            },
            itemStyle: {
              color: "#DC143C"
            }
          },
          {
            //c
            name: "磁盘",
            type: "bar",
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: Object.values(builderJson.disk),
            label: {
              show: true,
              position: "right",
              align: "left",
              color:"#FFFFFF"
            },
            itemStyle: {
              color: "#DC143C"
            }
          },
          {
            //d
            name: "流量",
            type: "bar",
            xAxisIndex: 3,
            yAxisIndex: 3,
            data: Object.values(builderJson.flux),
            label: {
              show: true,
              position: "right",
              align: "left",
              color:"#FFFFFF"
            },
            itemStyle: {
              color: "#DC143C "
            }
          }
        ]
      }
    };
  }
};
</script>
